<!DOCTYPE html>
<html lang="en">

    {% extends "base.html" %}

    {% block title %}
    特产管理首页
    {% endblock %}

    {% block header %}
    特产管理
    {% endblock %}

    {% block functions %}
    <button class="btn btn-success btn-w-md" type="button" data-toggle="modal" data-target="#addModal">添加产品</button>
    <!-- 添加模态框 -->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="addModalLabel">添加产品</h4>
                </div>
                <div class="modal-body">
                    <form id="addForm" enctype="multipart/form-data">
                        <div class="form-group">
                            <label>产品名称</label>
                            <input class="form-control" type="text" id="name" name="name" required>
                        </div>
                        <div class="form-group">
                            <label>产品详情</label>
                            <textarea class="form-control" id="desc" name="desc" rows="3" required></textarea>
                        </div>
                        <div class="form-group">
                            <label>产品种类</label>
                            <input class="form-control" type="text" id="category" name="category" required>
                        </div>
                        <div class="form-group">
                            <label>产品质量</label>
                            <input class="form-control" type="text" id="quality" name="quality" required>
                        </div>
                        <div class="form-group">
                            <label>产品规格</label>
                            <input class="form-control" type="text" id="specification" name="specification" required>
                        </div>
                        <div class="form-group">
                            <label>产品图片</label>
                            <input class="form-control" type="file" id="file" name="file" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="saveAdd">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 更新模态框 -->
    <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="updateModalLabel">修改产品信息</h4>
                </div>
                <div class="modal-body">
                    <form id="updateForm" enctype="multipart/form-data">
                        <input type="hidden" id="productId" name="productId">
                        <div class="form-group">
                            <label>产品名称</label>
                            <input class="form-control" type="text" id="updateName" name="name" required>
                        </div>
                        <div class="form-group">
                            <label>产品详情</label>
                            <textarea class="form-control" id="updateDesc" name="desc" rows="3" required></textarea>
                        </div>
                        <div class="form-group">
                            <label>产品种类</label>
                            <input class="form-control" type="text" id="updateCategory" name="category" required>
                        </div>
                        <div class="form-group">
                            <label>产品质量</label>
                            <input class="form-control" type="text" id="updateQuality" name="quality" required>
                        </div>
                        <div class="form-group">
                            <label>产品规格</label>
                            <input class="form-control" type="text" id="updateSpecification" name="specification" required>
                        </div>
                        <div class="form-group">
                            <label>产品图片 (可选)</label>
                            <input class="form-control" type="file" id="updateFile" name="file">
                            <small class="form-text text-muted">仅当需要更新图片时选择</small>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="saveUpdate">保存修改</button>
                </div>
            </div>
        </div>
    </div>
    {% endblock %}

    {% block trs %}
    <th>ID</th>
    <th>名称</th>
    <th>图片</th>
    <th>种类</th>
    <th>质量</th>
    <th>规格</th>
    <th>详情</th>
    <th>操作</th>
    {% endblock %}

    {% block tds %}
    {% for item in data.data %}
    <tr id="item-{{ item.id }}">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td><img src="{{ item.url }}" style="width: 100px" /></td>
        <td>{{ item.category }}</td>
        <td>{{ item.quality }}</td>
        <td>{{ item.specification }}</td>
        <td>{{ item.desc }}</td>
        <td>
<!--            <button type="button" class="btn btn-warning btn-w-md update" data-id="{{ item.id }}">修改</button>-->
            <button type="button" class="btn btn-danger btn-w-md delete" data-id="{{ item.id }}">删除</button>
        </td>
    </tr>
    {% endfor %}
    {% endblock %}

    <div class="zxf_pagediv" style="margin-bottom: 20px"></div>

    {% block scripts %}
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='pagination/zxf_page.js') }}"></script>

    <script>
        $(function () {
            // 添加产品
            $('#saveAdd').on('click', function () {
                const name = $('#name').val();
                const desc = $('#desc').val();
                const category = $('#category').val();
                const quality = $('#quality').val();
                const specification = $('#specification').val();
                const file = $('#file')[0].files[0];

                if (!name || !desc || !category || !quality || !specification || !file) {
                    alert('请填写所有必填字段并选择图片');
                    return;
                }

                const formData = new FormData($('#addForm')[0]);

                $.ajax({
                    url: '{{ url_for("admin_product.add") }}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        $('#addForm')[0].reset();
                        $('#addModal').modal('hide');
                        alert(res.message);
                        location.reload();
                    },
                    error: function (xhr) {
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            alert(xhr.responseJSON.message);
                        } else {
                            alert('添加失败，请检查文件上传是否正确');
                        }
                    }
                });
            });

            // 删除产品
            $('.delete').on('click', function () {
                const id = $(this).data('id');
                if (confirm('确定要删除这个产品吗？')) {
                    $.ajax({
                        url: "{{ url_for('admin_product.delete', id='') }}" + id,
                        type: 'DELETE',
                        success: function (res) {
                            alert(res.message);
                            $(`#item-${id}`).remove();
                        },
                        error: function (xhr) {
                            if (xhr.responseJSON && xhr.responseJSON.message) {
                                alert(xhr.responseJSON.message);
                            } else {
                                alert('删除失败');
                            }
                        }
                    });
                }
            });

            // 打开更新模态框
            $('.update').on('click', function () {
                const id = $(this).data('id');
                const row = $(`#item-${id}`);

                $('#productId').val(id);
                $('#updateName').val(row.find('td:eq(1)').text());
                $('#updateDesc').val(row.find('td:eq(6)').text());
                $('#updateCategory').val(row.find('td:eq(3)').text());
                $('#updateQuality').val(row.find('td:eq(4)').text());
                $('#updateSpecification').val(row.find('td:eq(5)').text());

                $('#updateModal').modal('show');
            });

            // 更新产品
            $('#saveUpdate').on('click', function () {
                const formData = new FormData($('#updateForm')[0]);
                const id = formData.get('productId');

                $.ajax({
                    url: "{{ url_for('admin_product.update', id='') }}" + id,
                    type: 'PUT',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        $('#updateModal').modal('hide');
                        alert(res.message);
                        location.reload();
                    },
                    error: function (xhr) {
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            alert(xhr.responseJSON.message);
                        } else {
                            alert('更新失败');
                        }
                    }
                });
            });

            // 分页组件
            $(".zxf_pagediv").createPage({
                pageNum: {{ data.total_pages }},
                current: {{ data.page }},
                backfun: function (e) {
                    var n_current = e['current'];
                    var part_path = window.location.pathname.split('/');
                    part_path[4] = n_current;
                    window.location.href = part_path.join('/');
                }
            });
        });
    </script>
    {% endblock %}
</body>
</html>